<template>
    <div>
        <!--面包屑导航区-->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>商品管理</el-breadcrumb-item>
            <el-breadcrumb-item>商品列表</el-breadcrumb-item>
        </el-breadcrumb>

        <!--卡片视图区域-->
        <el-card>
            <!--搜索与添加区域-->
            <!--:gutter: el-col的间距, :span栅格长度-->
            <el-row :gutter="20">
                <el-col :span="8">
                    <!--@clear: 清空搜索栏同时数据全部展示-->
                    <el-input placeholder="请输入内容" class="input-with-select"
                              v-model="queryInfo.query" clearable @clear="getRecords">
                        <el-button slot="append" icon="el-icon-search" @click="getRecords"></el-button>
                    </el-input>
                </el-col>
                <el-col :span="4">
                    <el-button type="primary" @click="showAdd">添加商品</el-button>
                </el-col>
            </el-row>
            <!--表格区域-->
            <el-table
                    :data="tableData"
                    width="100%"
                    border
                    stripe>
                <el-table-column type="index" width="50" label="#"></el-table-column>
                <el-table-column prop="name" label="商品名称"></el-table-column>
                <el-table-column prop="price" label="商品价格(元)" width="140px"></el-table-column>
                <el-table-column prop="weight" label="商品重量" width="80px"></el-table-column>
                <el-table-column prop="createTime" label="创建时间" width="200px"></el-table-column>
                <el-table-column label="操作" width="120px">
                    <template slot-scope="scope">
                        <el-button type="primary" size="mini" @click="showEdit(scope.row)"
                                   icon="el-icon-edit"></el-button>
                        <el-button type="danger" size="mini" @click="deleteGoods(scope.row.id)"
                                   icon="el-icon-delete"></el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!--分页区域-->
            <!--layout: 指定分页主键显示-->
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="queryInfo.pageIndex"
                    :page-sizes="[5,10,20,50]"
                    :page-size="queryInfo.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </el-card>

    </div>
</template>

<script>
    export default {
        name: "GoodsList",
        data() {
            return {
                queryInfo: {
                    query: '',
                    pageSize: 10,
                    pageIndex: 1
                },
                tableData: [{
                    id: 1,
                    name: '兰州牌香烟中国大陆用户专用抽抽',
                    price: '100.0',
                    weight: '30',
                    createTime: '2020-07-09 12:24:24',
                }],
                total: 100,
            }
        },
        created() {
            // this.getRecords();
        },
        methods: {
            // 异步请求用户数据
            async getRecords() {
                const {data: res} = await this.$http.post('users', {param: this.queryInfo});
                if (res.code + '' !== '200') {
                    this.$message.error('获取用户数据失败');
                } else {
                    // TODO 赋值数据, 并且分页数据绑定
                }
            },
            changeStatus(row) {
                // TODO 这个是修改后的状态, 需要同步到数据库
                console.log(row);
            },
            // 监听pageSize 改变
            handleSizeChange(newSize) {
                console.log(newSize);
                this.queryInfo.pageSize = newSize;
            },
            // 页码值改变的事件
            handleCurrentChange(newPage) {
                console.log(newPage);
                this.queryInfo.pageIndex = newPage;
            },
            // 关闭时修改表单引用调用resetFields 清空表单数据
            closeEditForm() {
                this.$refs.editFormRef.resetFields();
            },
            // 展示编辑用户对话框
            showEdit(row) {
                this.$router.push('/addGoods');
            },
            showAdd(row) {
                console.log(row);
                this.$router.push('/addGoods');
            },
            // 修改/添加用户数据
            commitGoods() {
                this.$refs.editFormRef.validate(valid => {
                    if (!valid) {
                        return;
                    }
                    // TODO 然后发起真正的网络请求添加数据
                    this.$message.success('添加成功');
                    this.getRecords();
                });
            },
            // 删除数据
            async deleteGoods(id) {
                const confirm = await this.$confirm('此操作将删除该记录, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).catch(err => err);
                console.log(confirm); // confirm || cancel
                if (confirm === 'confirm') {
                    this.$message.success("已确认删除");
                    this.getRecords();

                    /*const {data: res} = await this.$http.post('users', {id: id});
                    if (res.code + '' === '200') {
                        this.$message.success("已确认删除");
                        this.getRecords();
                    } else {
                        return this.$message.error("删除失败, 请稍后重试");
                    }*/
                } else {
                    return this.$message.info("已取消删除");
                }
            },
        }

    }
</script>

<style lang="less" scoped>


</style>
